<template>
  <div id="app">
    <div class="main">
      <bottom-nav class="navbar" v-show="$route.meta.bottomNav"></bottom-nav>
      <backTop
        v-show="showBtn == true"
        class="backBtn"
        ref="backBtn"
      ></backTop>
      <router-view
        @add-colect="addColect"
        @collect="del"
        @currentBuy="buyFun"
        @change-address="changeAddressFun"
        @change-index="changeIndexAddNumFun"
        @change-sub="changeIndexSubFun"
        @changeNum="changCurrentBuyNum"
        @goodsPayState="changeGoodPayState"
        @changeState="changseState"
        @delFun="delPayFun"
        :colect="colect"
        :currentBuyGoods="currentBuyGoods"
        :changeAddress="changeAddress"
        :payList="payList"
      ></router-view>
    </div>
  </div>
</template>

<script>
import bottomNav from "./components/base/bottomNav.vue";
import backTop from "./components/base/backTop.vue";

export default {
  components: {
    bottomNav,
    backTop,
  },
  data() {
    return {
      colect: [], //加入购物车的商品列表
      currentBuyGoods: [], //当前立即购买的商品
      changeAddress: [], //添加收货地址
      payList: [], //支付页面的商品
      scrollTop: 0,
      showBtn:false
    };
  },
  mounted() {
    window.addEventListener("scroll", this.getScroll);
  },
  methods: {
    // 删除支付页面某一商品
    delPayFun(index) {
      this.payList.splice(index, 1);
    },
    // 改变商品的状态 state
    changseState(id) {
      let index = this.payList.findIndex((item) => {
        return item.id == id;
      });
      this.payList[index].state += 1;
    },
    // 添加当前购买商品的状态
    changeGoodPayState(state) {
      this.currentBuyGoods.state = state;
      console.log(this.currentBuyGoods);
      this.payList.push(this.currentBuyGoods);
      console.log(this.payList);
    },
    // 修改当前购买商品的数量
    changCurrentBuyNum(num) {
      this.currentBuyGoods.num = num;
    },
    // 添加商品数量
    changeIndexSubFun(val) {
      this.colect[val].num--;
    },
    // 减少商品数量
    changeIndexAddNumFun(val) {
      console.log(val);
      this.colect[val].num++;
      // console.log(this.colect[val].num);
    },
    // 修改地址
    changeAddressFun(val) {
      this.changeAddress = val;
    },
    buyFun(arr) {
      this.currentBuyGoods = arr;
      console.log(this.currentBuyGoods);
      console.log(111);
    },
    // 添加购物车商品
    addColect: function (val) {
      // console.log(val);
      this.colec = val;
      // console.log(this.colect);
    },
    del(id) {
      let index = this.colect.findIndex((item) => {
        return item.id == id;
      });
      this.colect.splice(index, 1);
    },
    getScroll() {
      this.scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // console.log(this.scrollTop);
      if (this.scrollTop > 1000) {
        this.showBtn = true
      }else{
        this.showBtn = false
      }
    },
    backFun() {
      console.log(111);
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      const timer = setInterval(() => {
        document.body.scrollTop =
          document.documentElement.scrollTop =
          top -=
            50;
        if (top <= 0) {
          clearInterval(timer);
        }
      }, 20);
    },
  },
  destroyed() {
      document.removeEventListener('scroll', this.getScroll)
    }
};
</script>

<style lang="less">
@import "./assets/css/base.css";
.navbar {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 111;
}
// .backBtn {
//   opacity: 0;
// }
</style>